<template>
  <div class="wrap">
    <div class="header">
      <div class="logo">
        <img
          src="../assets/jin/logo.png"
          alt=""
          @click="$router.push('/indexx')"
        />
      </div>
      <ul class="list1">
        <li
          class="list1-li"
          v-for="(item, index) in tabBar"
          :key="index"
          :class="item.flag ? 'bg' : 'nbg'"
        >
          <div class="list1-box" v-on:mouseover="curshow(item)" @click="tiaozhuan(item.first)">
            {{ item.first }}
          </div>

          <!-- <li class="list1-li" @mouseover="item.show=i" @mouseout="item.show=-1" v-for="(item,index) in tabBar"   :key="index"  :class="!item.show ? 'bg': 'nbg'"> -->
          <!-- <div class="list1-box"  >{{item.first}}</div> -->
          <ul class="list2" v-if="item.flag">
            <li
              v-for="(item2, index2) in item.second"
              :key="index2"
              @click="tiaozhuan(item2)"
            >
              {{ item2 }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      show: "-1",
      tabBar: [
        {
          first: "解决方案",
          flag: false,
          show: "-1",
          second: ["驾培一体化概述", "功能与价值", "各地政策"],
        },
        {
          first: "关于我们",
          flag: false,
          show: "-1",
          second: ["关于我们", "办公图片", "工厂图片"],
        },
        {
          first: "产品中心",
          flag: false,
          show: "-1",
          second: ["硬件产品", "软件介绍"],
        },
        {
          first: "教学中心",
          flag: false,
          show: "-1",
          second: ["模拟器演示", "科目二", "科目三"],
        },
        {
          first: "信息中心",
          flag: false,
          show: "-1",
          second: ["公司新闻", "行业动态", "安全驾驶", "驾驶信息", "经验必得"],
        },
        {
          first: "合作商家",
          flag: false,
          show: "-1",
        },
        {
          first: "加盟合作",
          flag: false,
          show: "-1",
          second: ["服务支持", "合作方案", "盈利分析"],
        },
        {
          first: "联系我们",
          flag: false,
          show: "-1",
        },
      ],
    };
  },
  methods: {
    //路由跳转
    tiaozhuan(item) {
      console.log(item);
      //yjx
      switch (item) {
        case "驾培一体化概述":
          this.$router.push("/jjfa/jpythgs");
          break;
        case "功能与价值":
          this.$router.push("/jjfa/gnyjz");
          break;
        case "各地政策":
          this.$router.push("/jjfa/gdzc");
          break;
        case "关于我们":
          this.$router.push("/index/gywm");
          break;
        case "办公图片":
          this.$router.push("/index/bgtp");
          break;
        case "工厂图片":
          this.$router.push("/index/gctp");
          break;
        case "软件介绍":
          this.$router.push("/cpzx/rjjs");
          break;
        case "硬件产品":
          this.$router.push("/cpzx/yjcp");
          break;
      }

      if (item == "模拟器演示") {
        this.$router.push("/ztone");
      }
      if (item == "科目二") {
        this.$router.push("/zttow");
      }
      if (item == "科目三") {
        this.$router.push("/ztthree");
      }
      if (item == "公司新闻") {
        this.$router.push("/ztfour");
      }
      if (item == "行业动态") {
        this.$router.push("/ztfive");
      }
      if (item == "安全驾驶") {
        this.$router.push("/ztsix");
      }
      if (item == "驾驶信息") {
        this.$router.push("/ztqi");
      }
      if (item == "经验必得") {
        this.$router.push("/ztba");
      }

      //xrw
      if (item == "合作商家") {
        this.$router.push("/xing");
      }
      if (item == "服务支持") {
        this.$router.push("/service");
      }
      if (item == "合作方案") {
        this.$router.push("/coop");
      }
      if (item == "盈利分析") {
        this.$router.push("/payoff");
      }
      if (item == "联系我们") {
        this.$router.push("/cont");
      }
    },
    curshow: function (list) {
      if (list.flag) {
        list.flag = false;
      } else {
        for (let i = 0; i < this.tabBar.length; i++) {
          this.tabBar[i].flag = false;
        }
        list.flag = true;
      }
    },
    out: function (item) {
      item.flag = false;
    },
  },
  components: {},
};
</script>
<style lang="sass">
.wrap
  position: relative
  width: 100%
  height: 888px
  .header
    z-index: 999
    width: 100%
    height: 100px
    background: #f4f4f4
    border-radius: 4px
    color: #777
    position: fixed
    top: 0
    left: 0
    margin-bottom: 20px
    display: flex
    align-items: center

  .logo
    margin: 0 20px

  .list1
    display: flex
    justify-content: space-between
    align-items: center

  .list1-li
    position: relative
    width: 130px
    font-size: 16px
    border-right: 1px solid #142b57
    height: 62px
    line-height: 62px
    font-size: 16px
    color: #142b57
  .list1-box
    box-sizing: border-box
    padding: 0 14px
  .list1-li:last-child
    border-right: none

  .list2
    position: absolute
    background: #142b57
    color: #ccc
    width: 130px
  .nbg
    background: none
    color: #142b57
  .bg
    background: #142b57
    color: #fff
  .list2 li
    width: 130px
    box-sizing: border-box
    border: none
    text-align: left
    padding: 0 0px 0 14px
  .online-consultation
    width: 144px
    height: 50px
    position: fixed
    top: 50%
    right: 2px
    margin-top: -25px
    background: #00AEF3
    border-radius: 5px
    div
      background: url('../assets/qi/iconWord0.png') no-repeat
      width: 140px
      height: 50px
      position: absolute
      top: 50%
      left: 50%
      margin-top: -25px
      margin-left: -68px
</style>
